<template>
  <div class="myJob">
    <Card>
    <Form :model="myJobs" :label-width="80" style="margin: 20px" ref="myJobs">
      <Row>
        <Col span="5">
          <FormItem label="任务名称">
            <Input v-model="myJobs.jobName" placeholder="请输入任务名称"></Input>
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="任务状态">
            <Select v-model="myJobs.jobState" clearable>
              <Option value="0">审核中</Option>
              <Option value="1">未接受</Option>
              <Option value="2">已接受</Option>
              <Option value="3">已完成</Option>
              <Option value="4">审核未通过</Option>
            </Select>
          </FormItem>
        </Col>
<!--        <Col span="5">-->
<!--          <FormItem label="任务时间">-->
<!--            <DatePicker type="daterange" split-panels placeholder="选择时间" style="width: 200px" @on-change="changeTime"></DatePicker>-->
<!--          </FormItem>-->
<!--        </Col>-->
        <FormItem>
          <Button type="primary" @click="search">搜索</Button>
          <Button style="margin-left: 8px" @click="search">重置</Button>
        </FormItem>
      </Row>
    </Form>
    <Card style="width:100%">
      <div style="text-align:center">
        <Table :data="myJobData" :columns="myJobColumns" stripe></Table>
        <Page :total="total" show-elevator style="margin-top: 10px" @on-change="changePage"/>
      </div>
    </Card>
    </Card>

    <Modal
      v-model="show"
      title="任务详情"
      @on-ok="ok"
    >
      <lookJobModel :rowData = rowData></lookJobModel>
    </Modal>
  </div>

</template>

<script>
  import axios from 'axios';
  import lookJobModel from "./lookJobModel";
  export default {
    name: "myJob",
    components:{
      lookJobModel
    },
    data() {
      return {
        total:0,
        show:false,
        rowData:{},
        myJobs:{
          pageNumber:1,
          pageSize:10,
          startTime:null,
          endTime:null,
          jobId:'',
          userId:'',
          jobName:'',
          jobTime:null,
          gold:'',
          jobState:''
        },
        myJobColumns:[
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '任务编号',
            key: 'jobName',
          },
          {
            title: '任务描述',
            key: 'jobDescribe'
          },
          {
            title: '任务赏金',
            key: 'gold'
          },
          {
            title: '订单状态',
            key: 'jobState',
            render: (h, params) => {
              let state = '';
              if (params.row.jobState=='0'){
                this.state = '审核中'
              }else if(params.row.jobState=='1'){
                this.state = '未接受'
              }else if(params.row.jobState=='2'){
                this.state = '已接受'
              }else if(params.row.jobState=='3'){
                this.state = '已完成'
              }else{
                this.state = '未完成'
              }
              return h('div', [
                h('div', {
                }, this.state),
              ]);
            }
          },
          {
            title: '发布时间',
            key: 'createTime'
          },
          {
            title: '完成时间',
            key: 'jobTime'
          },
          {
            title: '任务接受者',
            key: 'jobStaff',
            render: (h, params) => {
              let state = '';
              if (params.row.jobStaff == null) {
                this.state = '未接受'
              } else {
                this.state = params.row.jobStaff
              }
              return h('div', [
                h('div', this.state),
              ]);
            }
          },
          {
            title: 'Action',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      if (params.row.jobState=='0'){
                        params.row.jobState = '审核中'
                      }else if(params.row.jobState=='1'){
                        params.row.jobState = '未接受'
                      }else if(params.row.jobState=='2'){
                        params.row.jobState = '已接受'
                      }else if(params.row.jobState=='3'){
                        params.row.jobState = '已完成'
                      }else{
                        params.row.jobState = '审核未通过'
                      }
                      if (params.row.jobStaff==null){
                        params.row.jobStaff = '未接受'
                      }
                      if (params.row.finishTime==null){
                        params.row.finishTime = '未完成'
                      }
                      this.rowData = params.row
                      this.show = true
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title:'确认删除',
                        content:'您确定删除所点击的数据?',
                        onOk:() => {
                      //    删除
                          if (params.row.jobState == '2' ){
                            this.$Message.error("删除错误，任务已被接受不可删除，若想删除请联系管理员！")
                          }else{
                            this.deleJob(params.row.jobId)
                          }
                      },
                        onCancel:() => {
                          this.$Message.info("取消了当前操作")
                        }
                      })
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        myJobData:[
          {
            pageNumber:1,
            pageSize:10,
            jobId:'',
            startTime:null,
            endTime:null,
            userId:'',
            jobName:'',
            jobTime:null,
            gold:'',
            jobState:''
          },
        ]
      }
    },
    methods: {
      changeTime(date){
        // this.myJobs.startTime = date[0]
        // this.myJobs.endTime = date[1]
      },
      search(){
        this.changePage(1)
      },
      changePage(v){
        this.myJobs.pageNumber = v
        this.getData()
      },
      ok(){
        this.show=false
      },
      getData(){
        axios.get('http://localhost:8888/jobController/queryJobById',{params: this.myJobs}).then(res =>{
          this.myJobData = res.data.list
          this.total = res.data.total
        })
      },
      handleReset (name){
        this.$refs[name].resetFields();
        this.getData()
      },
      deleJob(id){
        axios.get("http://localhost:8888/jobController/deleteJob", {params: {jobId:id}}).then(res => {
          if (res) {
            this.$Message.success("成功删除任务")
            this.getData()
          } else {
            this.$Message.error("删除任务失败")
          }
        })
      },
    },
    mounted() {
      this. myJobs={
        pageNumber:1,
          pageSize:10,
          startTime:null,
          endTime:null,
          jobId:'',
          userId:'',
          jobName:'',
          jobTime:null,
          gold:'',
          jobState:''
      }
      if (this.$getCookie("userId")){
        this.myJobs.userId = this.$getCookie("userId")
        this.getData();
      }else{
        this.$router.push({path: '/login'});
      }

    }
  }
</script>

<style scoped>
  .myJob{
    margin:20px 0 0 20px
  }
</style>
